<!--热销推荐 -->
<template>
  <div>
      <div class="recommend-title">猜你喜欢</div>
      <ul>
          <router-link tag="li" class="item" v-for="item in recommendList" :key="item.id" :to="'/detail/'+item.id">
                  <img class='item-img' :src="item.imgUrl" alt="">
                  <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                  </div>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    'recommendList': Array
  },
  components: {},

  computed: {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
@import '~styles/mixins.styl'
.recommend-title
    margin-top .2rem
    line-height .8rem
    background  #eee
    text-indent .2rem
.item
   display flex
   overflow hidden
   height 2.0rem
   .item-img
       width 1.8rem
       height 1.8rem
       padding 0.1rem
    .item-info
        min-width 0
        flex:1
        padding .1rem
        .item-title
            line-height .54rem
            font-size .32rem
            ellipsis()
        .item-desc
            line-height 0.4rem
            color #ccc
            ellipsis()
        .item-button
            line-height .44rem
            margin-top .2rem
            background #ff9300
            padding .1rem .2rem
            border-radius 0.06rem
            color #fff
</style>
